<template>
  <!-- 需求录入-->
  <div v-show="visiable" class="drawer-box-wrapper left-box">
    <div class="taskCase_container" style="margin-bottom: 10px">
      <h2>需求录入</h2>
    </div>

    <left-table @callbackTable="getExcelTabel" ref="leftRefTable" />

    <el-form
      :label-position="labelPosition"
      :model="formLabelAlign"
      size="small"
      ref="ruleForm"
      :rules="rules"
      label-width="120px"
      style="margin-top: 10px"
    >
      <div class="flex">
        <el-form-item label="需求名称：" class="item-width" prop="xqmc">
          <el-input
            v-model="formLabelAlign.xqmc"
            placeholder="请输入需求名称"
            v-no-space
            v-max-length-tip="30"
            maxlength="30"
          ></el-input>
        </el-form-item>
        <el-form-item label="任务类型：" class="item-width" prop="rwlx">
          <el-select
            clearable
            v-model="formLabelAlign.rwlx"
            placeholder="请选择任务类型"
          >
            <el-option
              v-for="(item, index) in missionTypeOption"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="目标形态：" class="item-width" prop="mbxt">
          <el-select
            clearable
            v-model="formLabelAlign.mbxt"
            placeholder="请选择目标动态"
          >
            <el-option
              v-for="(item, index) in targetShapeOption"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </div>
      <div class="flex">
        <el-form-item
          label="气象条件："
          class="item-width"
          placeholder="请选择气象条件"
          prop="qxtj"
        >
          <el-select clearable v-model="formLabelAlign.qxtj">
            <el-option
              v-for="(item, index) in weatherConditionOption"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="攻击因素：" class="item-width" prop="gjys">
          <el-select v-model="formLabelAlign.gjys">
            <el-option
              v-for="item in whetherOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="是否合作目标："
          class="item-width"
          prop="sfhzmb"
          style="width: 50%"
        >
          <el-select v-model="formLabelAlign.sfhzmb" style="width: 100%">
            <el-option
              v-for="item in whetherOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </div>
      <div class="flex">
        <el-form-item
          style="width: 33.4%;"
          label="需求开始时间"
          prop="xqkssj"
          class="item-width"
        >
          <el-date-picker
            value-format="yyyy-MM-dd HH:mm:ss"
            style="width: 100%"
            v-model="formLabelAlign.xqkssj"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item
          style="width: 33.4%;"
          label="需求结束时间"
          prop="xqjssj"
          class="item-width"
        >
          <el-date-picker
            value-format="yyyy-MM-dd HH:mm:ss"
            style="width: 100%"
            v-model="formLabelAlign.xqjssj"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
      </div>
      <div
        class="flex"
        style="justify-content: space-between; align-items: flex-start"
      >
        <el-form-item
          label="选择模型："
          class="item-width"
          style="width: 77%; margin-right: 10px"
          prop="xzmx"
        >
          <el-input v-model="formLabelAlign.xzmx" readonly />
        </el-form-item>
        <el-button size="small" type="primary" @click="handleIntelligent"
          >智能决策</el-button
        >
        <el-button size="small" type="primary" @click="handleAutomation"
          >全流程自动化运行</el-button
        >
      </div>
      <div class="flex">
        <el-form-item label="载荷类型：" class="item-width" prop="zhlx">
          <el-input v-model="formLabelAlign.zhlx" readonly></el-input>
        </el-form-item>
        <el-form-item label="工作模式：" class="item-width" prop="gzms">
          <el-input readonly v-model="formLabelAlign.gzms"></el-input>
        </el-form-item>
      </div>
      <div class="flex">
        <el-form-item label="分辨率(m)：" class="item-width" prop="fbl">
          <el-input readonly v-model="formLabelAlign.fbl"> </el-input>
        </el-form-item>
        <el-form-item label="优先级：" class="item-width" prop="yxj">
          <el-input v-model="formLabelAlign.yxj" readonly></el-input>
        </el-form-item>
      </div>
    </el-form>

    <div class="text-align-center">
      <el-button
        size="small"
        type="primary"
        @click="programevaluation('ruleForm')"
        >确定</el-button
      >
    </div>
    <!-- <el-button
      size="small"
      type="primary"
      @click="UpdatePlanTasks('ruleForm')"
      v-else
      >编辑任务筹划</el-button
    > -->

    <left-modal ref="leftmodalRef" @callback="childCallback" />
  </div>
</template>

<script>
import { SavePlanTasks, UpdatePlanTasks } from '@/api/decisionManage/index.js'
import LeftModal from './modal/leftmodal.vue'
import LeftTable from './modal/leftTable.vue'
import {
  PriorityOptions,
  whetherOption,
  missionTypeOption,
  targetShapeOption,
  weatherConditionOption
} from '@/assets/data/pathInfo'
import { compareDates } from '@/utils/index'
export default {
  components: {
    LeftModal,
    LeftTable
  },
  data() {
    return {
      visiable: false,
      labelPosition: 'right',
      formLabelAlign: {
        rwlx: '',
        mbxt: '',
        qxtj: '',
        gjys: '',
        sfhzmb: '',
        xzmx: '',
        zhlx: '',
        gzms: '',
        fbl: '',
        yxj: '',
        gcxqPointList: [],
        xqjssj: '',
        xqkssj: '',
        xqmc: ''
      },

      rules: {
        xqmc: [{ required: true, message: '请输入需求名称', trigger: 'blur' }],
        rwlx: [{ required: true, message: '请输入任务类型', trigger: 'blur' }],
        mbxt: [{ required: true, message: '请输入目标形态', trigger: 'blur' }],
        qxtj: [
          {
            required: true,
            message: '请输入气象条件',
            trigger: 'blur'
          }
        ],
        gjys: [
          { required: true, message: '请选择攻击因素', trigger: 'change' }
        ],
        xzmx: [{ required: true, message: '请选择模型', trigger: 'change' }],
        sfhzmb: [
          { required: true, message: '请选择合作目标', trigger: 'change' }
        ],
        xqkssj: [
          { required: true, message: '请选择需求开始时间', trigger: 'change' }
        ],
        xqjssj: [
          { required: true, message: '请选择需求结束时间', trigger: 'change' }
        ]
      },
      PriorityOptions,
      whetherOption,
      missionTypeOption,
      targetShapeOption,
      weatherConditionOption,
      AutomationMask: null,
      basis: false,

      zhlxOptions: [
        { label: '光学', value: '光学' },
        { label: 'SAR', value: 'SAR' }
      ]
    }
  },
  mounted() {
    this.$bus.$on('closeAutomationMask', data => {
      this.hiddenLoading()
    })
    this.$bus.$on('showAutomationMask', data => {
      this.showLoading()
    })
    // 监听点击保存
    this.$bus.$on('saveAutoConfig', data => {
      // 调用保存
      this.programevaluation('ruleForm')
    })
  },
  methods: {
    // 自动化流程
    handleAutomation() {
      // 让子组件知道是自动化流程，需要手动选择
      this.basis = true
      // 就不自己选择了，需要手动选择
      // this.AutomationMask = this.$loading({
      //   lock: true,
      //   text: '开始自动化运行',
      //   spinner: 'el-icon-loading',
      //   background: 'rgba(0, 0, 0, 0.7)'
      // })
      // 调用模型弹窗
      this.handleOpenModal()
    },

    // 智能决策
    handleIntelligent() {
      this.basis = false
      // 调用模型弹窗
      this.handleOpenModal()
    },

    // 表格回调组件
    getExcelTabel(data) {
      this.formLabelAlign.gcxqPointList = data
    },

    // 子组件回调函数
    childCallback(data, formValue, flag) {
      this.basis = flag
      // 模型名称回显
      this.formLabelAlign.xzmx = Array.isArray(data) ? data[0].mxmc : data.mxmc
      // 下方只读字段回显
      this.formLabelAlign.zhlx = formValue.zhlx
      this.formLabelAlign.gzms = formValue.gcms
      this.formLabelAlign.fbl = formValue.fbl
      this.formLabelAlign.yxj = formValue.yxj
      // 是自动化
      // if (this.basis) {
      // 调用保存
      // this.programevaluation('ruleForm')
      // }
    },

    // 打开模型弹窗
    handleOpenModal() {
      const data = {
        rwlx: this.formLabelAlign.rwlx,
        mbxt: this.formLabelAlign.mbxt,
        qxtj: this.formLabelAlign.qxtj,
        gjys: this.formLabelAlign.gjys,
        sfhzmb: this.formLabelAlign.sfhzmb
      }
      if (
        data.rwlx == '' ||
        data.mbxt == '' ||
        data.qxtj == '' ||
        data.gjys == '' ||
        data.sfhzmb == ''
      ) {
        this.$message({
          type: 'error',
          message: '请完善左侧信息'
        })
        // 不是自动化，关闭loading
        // if (this.AutomationMask !== false) {
        //   this.basis = false
        //   this.AutomationMask.close()
        //   this.AutomationMask = false
        // }
        return false
      }
      // 是自动化，就为true
      // if (this.AutomationMask !== false) {
      //   this.basis = true
      // } else {
      //   this.basis = false
      // }

      this.$refs.leftmodalRef.openModal(data, this.basis)
    },

    clearFields() {
      if (!this.visiable) {
        this.$refs.ruleForm.resetFields()
        this.formLabelAlign.xzmx = ''
        this.formLabelAlign.gcxqPointList = [] // 置空经纬度字段数据
        this.$refs.leftRefTable.jxInputData = [] // 置空选择的经纬度
        this.$refs.leftRefTable.formInline.demand = '' // 置空选择的文件名称
        this.$bus.$emit('renderPoint', [], false)
      }
    },

    /** 编辑任务 */
    UpdatePlanTasks(formName) {
      this.$refs[formName].validate(valid => {
        if (!valid) return false

        this.formLabelAlign.sfhzmb = Number(this.formLabelAlign.sfhzmb)
        UpdatePlanTasks(this.formLabelAlign).then(resposne => {
          if (resposne.data.code == 200) {
            this.$message({
              type: 'success',
              message: '操作成功'
            })
          } else {
            this.$message({
              type: 'error',
              message: '操作失败'
            })
          }
        })
      })
    },

    /** 保存任务筹划 */
    programevaluation(formName) {
      this.$refs[formName].validate(valid => {
        if (!valid) {
          return false
        }

        if (
          compareDates(
            this.formLabelAlign.xqkssj,
            this.formLabelAlign.xqjssj
          ) == false
        ) {
          this.$message({
            type: 'warning',
            message: '需求结束时间不能小于需求开始时间'
          })
          return false
        }

        if (this.formLabelAlign.gcxqPointList.length === 0) {
          // if (this.AutomationMask !== false) {
          //   this.basis = false
          //   this.AutomationMask.close()
          //   this.AutomationMask = false
          // }
          this.$message({
            type: 'warning',
            message: '请上传目标经纬度数据'
          })
          return false
        }

        let saveLoading = null
        if (this.basis == false) {
          saveLoading = this.$loading({
            lock: true,
            text: '正在保存需求',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
        }
        // else {
        // 显示自动化的遮罩层
        // this.showLoading()
        // }

        SavePlanTasks(this.formLabelAlign).then(resposne => {
          if (resposne.data.code == 200) {
            this.$message({
              type: 'success',
              message: '操作成功'
            })
            this.visiable = false
            // 同步左侧按钮样式
            this.$store.dispatch('drawer/setleftvisible', false)
            this.clearFields()

            if (this.basis) {
              // 点击的是自动化
              this.$bus.$emit('automationAction', true)
              this.visiable = false
            } else {
              saveLoading.close()
              this.$bus.$emit('normalAction', true)
            }
          } else {
            this.$message({
              type: 'error',
              message: '操作失败'
            })
          }
        })
      })
    },

    /** 显示遮罩层 */
    showLoading() {
      this.AutomationMask = this.$loading({
        lock: true,
        text: '开始自动化运行',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
    },
    /** 关闭遮罩层 */
    hiddenLoading() {
      if (this.AutomationMask !== null) {
        this.AutomationMask.close()
        this.AutomationMask = null
      }
    }
  },
  beforeDestroy() {
    this.$bus.$off('closeAutomationMask')
    this.$bus.$off('showAutomationMask')
    this.$bus.$off('saveAutoConfig')
  }
}
</script>

<style src="../index.scss" lang="scss"></style>
